<link rel="stylesheet" th:href="@{/febs/lay/modules/workflow/css/vendor.css}">
<link rel="stylesheet" th:href="@{/febs/lay/modules/workflow/css/app.css}">
<style>
    #workflowInfo-edit .layui-fluid {
        height: 100%;
        transform: scale(1);
    }

    #workflowInfo-edit .fc-primary {
        top: 0px;
        padding-bottom: 0px;
    }

</style>
<div class="febs-container" id="workflowInfo-edit">
    <div class="febs-open-body layui-fluid">
        <div class="fc-wrap">
            <div class="fc-primary">
                <div class="fc-design">
                    <div class="fc-zoom" id="zoom">
                        <div class="fc-zoom-out"></div>
                        <span>100%</span>
                        <div class="fc-zoom-in"></div>
                    </div>
                    <div class="box-container" style="overflow-x: auto;height: 100%;">
                        <div class="box-scale" id="box-scale">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="workflowInfo-edit-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </div>
</div>
<!-- 添加菜单 -->
<script id="tpl-menu" type="text/html">
    <div class="fc-menu">
        {{each menus as menu}}
        <div class="fc-menu-item">
            <div class="item-icon{{if menu.color}} color-{{menu.color}}{{/if}}"><i class="fa fa-{{menu.icon}}"></i>
            </div>
            <div class="item-text">{{menu.text}}</div>
        </div>
        {{/each}}
    </div>
</script>
<!-- 主架构 -->
<script id="tpl-root" type="text/html">
    <div class="start-node">
        <div class="start-node-circle">开始</div>
        {{include 'tpl-node-add'}}
    </div>
    <div class="end-node">
        <div class="end-node-circle"></div>
        <div class="end-node-text">流程结束</div>
    </div>
</script>

<!-- 容器：节点 -->
<script id="tpl-container" type="text/html">
    <div class="fc-tree-wrap">
        <div class="fc-tree-panel">
            {{include 'tpl-node-add'}}
        </div>
    </div>
</script>

<!-- 容器：分支布局 -->
<script id="tpl-row" type="text/html">
    <div class="fc-tree-row"></div>
</script>

<!-- 容器：分支列 -->
<script id="tpl-col" type="text/html">
    <div class="fc-tree-col">
        <div class="top-cover-line"></div>
        <div class="bottom-cover-line"></div>
    </div>
</script>

<!-- 按钮：添加节点 -->
<script id="tpl-node-add" type="text/html">
    <div class="add-node-toolbar">
        <div class="add-node-btn">
            <button type="button" class="fc-btn"><i class="fa fa-plus"></i></button>
        </div>
    </div>
</script>

<!-- 按钮：添加分支 -->
<script id="tpl-col-add" type="text/html">
    <div class="add-col-toolbar">
        <button type="button" class="add-col-btn">添加条件</button>
    </div>
</script>

<!-- 按钮：移除节点/分支 -->
<script id="tpl-remove" type="text/html">
    <button type="button" class="fc-btn-close"></button>
</script>

<!-- 角色节点 -->
<script id="tpl-actor" type="text/html">
    <div class="fc-tree-actor">
        {{include 'tpl-remove'}}
        <div class="fc-node-label">
            <div class="fc-node-header">
                <div class="fc-node-title">{{name}}</div>
                {{if tips}}
                <div class="fc-node-toolbar">
                    <button type="button" class="fc-btn">{{if icon}}<i class="fa fa-{{icon}}"></i>{{/if}}{{tips}}
                    </button>
                </div>
                {{/if}}
            </div>
            <div class="fc-node-body">
                <div class="fc-node-text">{{text}}</div>
            </div>
        </div>
    </div>
</script>

<!-- 条件节点 -->
<script id="tpl-node" type="text/html">
    <div class="fc-tree-node">
        <div class="fc-arrow to-left">&lt;</div>
        <div class="fc-arrow to-right">&gt;</div>
        {{include 'tpl-remove'}}
        <div class="fc-node-label">
            <div class="fc-node-header">
                <div class="fc-node-title">{{name||'未命名条件'}}</div>
            </div>
            <div class="fc-node-body">
                <div class="fc-node-text">{{text}}</div>
            </div>
        </div>
    </div>
</script>
<!-- 弹窗：审批属性 -->
<script id="tpl-review" type="text/html">
    <form name="form" novalidate="novalidate" style="margin-top: -12px;">
        <div class="fieldBox">
            <div class="fieldTitle">基本设置</div>
            <div class="fc-form customForm" id="reviewDrawer">
                <dl>
                    <dt><span class="fc-star">*</span>节点名称：</dt>
                    <dd class="fc-form-inline">
                        <input type="text" name="workflowNodeName" autocomplete="off" placeholder="请输入节点名称"
                               class="fc-ipt fc-ipt-auto">
                        <input type="text" name="workflowNodeId" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="workflowId" class="fc-ipt fc-ipt-auto fc-hide">
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>业务模块：</dt>
                    <dd class="fc-form-inline">
                        <select id="businessNodeId">
                        </select>
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>权限设置：</dt>
                    <dd style="flex: auto;">
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="1" checked
                                   onclick="workflowNodeCheckTypes(1)"/>
                            指定人员
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="2"
                                   onclick="workflowNodeCheckTypes(2)"/>
                            主管审批
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="3"
                                   onclick="workflowNodeCheckTypes(3)"/>
                            指定角色
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="4"
                                   onclick="workflowNodeCheckTypes(4)"/>
                            指定部门</label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="5"
                                   onclick="workflowNodeCheckTypes(5)"/>
                            自定义</label>
                    </dd>
                </dl>
                <dl class="addApproveUser customType" style="display: none;">
                    <dt><span class="fc-star">*</span>自定义权限：</dt>
                    <dd>
                        <select id="customQX">
                        </select>
                    </dd>
                </dl>
                <dl class="addApproveUser approveUser">
                    <dt><span class="fc-star">*</span>权限分配：</dt>
                    <dd style="display: flex;align-items: center">
                        <div style="margin-top: 0;display: flex;flex-wrap: wrap;" class="selectName"></div>
                        <button type="button" name="addApproveUser" plain=""
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
                                onclick="selApproveUser()">
                            <i class="layui-icon layui-icon-add-1"></i>
                            选择
                        </button>
                        <!--                        <input type="text" name="userId" class="fc-ipt fc-ipt-auto fc-hide">-->
                        <!--                        <input type="text" name="userName" class="fc-ipt fc-ipt-auto fc-hide">-->
                        <!--                        <input type="text" name="roleName" class="fc-ipt fc-ipt-auto fc-hide">-->
                        <!--                        <input type="text" name="roleId" class="fc-ipt fc-ipt-auto fc-hide">-->
                        <!--                        <input type="text" name="deptName" class="fc-ipt fc-ipt-auto fc-hide">-->
                        <!--                        <input type="text" name="deptId" class="fc-ipt fc-ipt-auto fc-hide">-->
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>允许加签：</dt>
                    <dd style="flex: auto;">
                        <label class="fc-group"><input type="radio" name="nodeBeforeReviewFlg" value="0"/>不允许</label>
                        <label class="fc-group"><input type="radio" name="nodeBeforeReviewFlg" value="1"
                                                       checked/>允许</label>
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>允许修改：</dt>
                    <dd style="flex: auto;">
                        <label class="fc-group"><input type="radio" name="nodeModifyFlg" value="0"/>不允许</label>
                        <label class="fc-group"><input type="radio" name="nodeModifyFlg" value="1" checked/>允许</label>
                    </dd>
                </dl>
                <dl>
                    <dt>备注：</dt>
                    <dd class="fc-form-inline">
                        <textarea type="text" name="remark" autocomplete="off" placeholder="请输入备注"
                                  class="fc-ipt fc-ipt-auto" style="width: 100%;"></textarea>
                    </dd>
                </dl>
            </div>

        </div>
        <div class="fieldBox">
            <div class="fieldTitle">按钮设置<span>(可选)</span></div>
            <input type="hidden" name="nodeIds" value="">
            <div class="fc-form allBtnContainer">
<!--                <dl class="buttonDiv">-->
<!--                    <i class="layui-icon layui-icon-close delBtn"></i>-->
<!--                    <div class="first">-->
<!--                        <dt><span class="fc-star">*</span>按钮类型：</dt>-->
<!--                        <dd style="flex: auto;" class="radioLine" data-oldvalue="1">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType1" value="1" checked-->
<!--                                       class="nodeTypeClick"/>通过</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType1" value="2" class="nodeTypeClick" disabled/>退回</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType1" value="3" class="nodeTypeClick" disabled/>拒绝</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType1" value="4" class="nodeTypeClick"/>自定义</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮id：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="nodeButtonId" autocomplete="off" placeholder="请输入按钮id"-->
<!--                                   onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')"-->
<!--                                   class="fc-ipt fc-ipt-auto btnidBlur">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="second">-->
<!--                        <dt><span class="fc-star">*</span>按钮名称：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="btnName" value="通过" autocomplete="off" placeholder="请输入按钮名称"-->
<!--                                   class="fc-ipt fc-ipt-auto">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="third defaultRadio">-->
<!--                        <dt><span class="fc-star">*</span>默认事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent1" value="0" class="defaultEvent"/>否</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent1" value="1" class="defaultEvent"-->
<!--                                       checked/>是</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="fourth fc-hide liuzhuanBox">-->
<!--                        <dt><span class="fc-star">*</span>流转方式：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay1" value="1" class="selectNodeRadio" checked/>下一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay1" value="2" class="selectNodeRadio"/>上一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay1" value="3" class="selectNodeRadio"/>指定节点</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="customNodeSelectLine fc-hide">-->
<!--                        <dt><span class="fc-star">*</span>指定节点：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customNodeSelect">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt>自定义事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customEvent">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                </dl>-->
<!--                <dl class="buttonDiv">-->
<!--                    <i class="layui-icon layui-icon-close delBtn"></i>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮类型：</dt>-->
<!--                        <dd style="flex: auto;" class="radioLine" data-oldvalue="2">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType2" value="1" checked class="nodeTypeClick"-->
<!--                                       disabled/>通过</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType2" value="2" class="nodeTypeClick"-->
<!--                                       checked/>退回</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType2" value="3" class="nodeTypeClick" disabled/>拒绝</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType2" value="4" class="nodeTypeClick"/>自定义</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮id：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="nodeButtonId" autocomplete="off" placeholder="请输入按钮id"-->
<!--                                   onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')"-->
<!--                                   class="fc-ipt fc-ipt-auto btnidBlur">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮名称：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="btnName" value="退回" autocomplete="off" placeholder="请输入按钮名称"-->
<!--                                   class="fc-ipt fc-ipt-auto">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="defaultRadio">-->
<!--                        <dt><span class="fc-star">*</span>默认事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent2" value="0" class="defaultEvent"/>否</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent2" value="1" class="defaultEvent"-->
<!--                                       checked/>是</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="fc-hide liuzhuanBox">-->
<!--                        <dt><span class="fc-star">*</span>流转方式：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay2" value="1" class="selectNodeRadio" checked/>下一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay2" value="2" class="selectNodeRadio"/>上一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay2" value="3" class="selectNodeRadio"/>指定节点</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="customNodeSelectLine fc-hide">-->
<!--                        <dt><span class="fc-star">*</span>指定节点：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customNodeSelect">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt>自定义事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customEvent">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                </dl>-->
<!--                <dl class="buttonDiv">-->
<!--                    <i class="layui-icon layui-icon-close delBtn"></i>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮类型：</dt>-->
<!--                        <dd style="flex: auto;" class="radioLine" data-oldvalue="3">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType3" value="1" checked class="nodeTypeClick"-->
<!--                                       disabled/>通过</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType3" value="2" class="nodeTypeClick" disabled/>退回</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType3" value="3" class="nodeTypeClick"-->
<!--                                       checked/>拒绝</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="nodeButtonType3" value="4" class="nodeTypeClick"/>自定义</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮id：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="nodeButtonId" autocomplete="off" placeholder="请输入按钮id"-->
<!--                                   onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')"-->
<!--                                   class="fc-ipt fc-ipt-auto btnidBlur">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt><span class="fc-star">*</span>按钮名称：</dt>-->
<!--                        <dd class="fc-form-inline">-->
<!--                            <input type="text" name="btnName" value="拒绝" autocomplete="off" placeholder="请输入按钮名称"-->
<!--                                   class="fc-ipt fc-ipt-auto">-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="third defaultRadio">-->
<!--                        <dt><span class="fc-star">*</span>默认事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent3" value="0" class="defaultEvent"/>否</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="defaultEvent3" value="1" class="defaultEvent"-->
<!--                                       checked/>是</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="fc-hide liuzhuanBox">-->
<!--                        <dt><span class="fc-star">*</span>流转方式：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay3" value="1" class="selectNodeRadio" checked/>下一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay3" value="2" class="selectNodeRadio"/>上一节点</label>-->
<!--                            <label class="fc-group">-->
<!--                                <input type="radio" name="transferWay3" value="3" class="selectNodeRadio"/>指定节点</label>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div class="customNodeSelectLine fc-hide">-->
<!--                        <dt><span class="fc-star">*</span>指定节点：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customNodeSelect">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <dt>自定义事件：</dt>-->
<!--                        <dd style="flex: auto;">-->
<!--                            <select class="customEvent">-->
<!--                            </select>-->
<!--                        </dd>-->
<!--                    </div>-->
<!--                </dl>-->
            </div>
            <div class="addButton">
                <button type="button" class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
                        onclick="addBtn(this)">新增
                </button>
            </div>
        </div>
    </form>
</script>
<script data-th-inline="javascript">
    var userInfo = [[${userInfo}]];
</script>
<script>
    layui.use(['jquery', 'febs', 'form', 'eleTree'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form;
        let radioInput = [1, 2, 3];

        function passType(data, b) {
            //所有模块
            // $(data).attr("checek","checked")
            // let passInput=$(".pass");
            // for(let i=0;i<passInput.length;i++){
            //     if($($(".pass")[i]).attr("name")!=$(data).attr("name")){
            //         $($(".pass")[i]).attr("checked",false);
            //         $($(".pass")[i]).attr("disabled","disabled");
            //     }
            // }

        }

        var approveType = 1
        // 权限设置
        window.workflowNodeCheckTypes = function (type) {
            $(".selectName").empty()
            if (type == 1 || type == 3 || type == 4) {
                $('.customType').hide()
                $('.approveUser').show()
                approveType = type
            } else if (type == 2) {
                // 主管审批
                $('.customType').hide()
                $('.approveUser').hide()
            } else if (type == 5) {
                $('.customType').show()
                $('.approveUser').hide()
            }
        }
        // 处理对象
        window.selApproveUser = function () {
            if (approveType == 1) {
                // 指定人员
                febs.modal.open('选择人员', '/common/user', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.userId}" data-name="${item.userName}">${item.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        } else {
                            htl += `<span class="tag" data-id="${data.userId}" data-name="${data.userName}">${data.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            } else if (approveType == 3) {
                // 指定角色
                febs.modal.open('选择角色', '/common/role/', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId,
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.roleId}" data-name="${item.roleName}">${item.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        }else{
                            htl += `<span class="tag" data-id="${data.roleId}" data-name="${data.roleName}">${data.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            } else if (approveType == 4) {
                // 指定部门
                febs.modal.open('选择部门', '/common/dept', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: ['500px','600px'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.deptId}" data-name="${item.deptName}">${item.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        }else{
                            htl += `<span class="tag" data-id="${data.deptId}" data-name="${data.deptName}">${data.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            }
        }
        window.delTags = function (data) {
            $(data).parent().remove()
        }
    })
</script>
<!-- 弹窗：抄送属性 -->
<script id="tpl-copyFor" type="text/html">
    <form name="form" novalidate="novalidate">
        <div class="fieldBox">
            <div class="fieldTitle">抄送设置</div>
            <div class="fc-form" id="copyForDrawer">
                <dl>
                    <dt><span class="fc-star">*</span>节点名称：</dt>
                    <dd style="flex: auto;">
                        <input type="text" name="workflowNodeName" placeholder="请输入节点名称" class="fc-ipt fc-ipt-auto"
                               style="width: 77%;">
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>抄送类型：</dt>
                    <dd style="flex: auto;">
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="1" checked
                                   onclick="workflowNotifierTypes(1)"/>
                            指定人员
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="2"
                                   onclick="workflowNotifierTypes(2)"/>
                            主管审批
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="3"
                                   onclick="workflowNotifierTypes(3)"/>
                            指定角色
                        </label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="4"
                                   onclick="workflowNotifierTypes(4)"/>
                            指定部门</label>
                        <label class="fc-group">
                            <input type="radio" name="workflowNodeCheckType" value="5"
                                   onclick="workflowNotifierTypes(5)"/>
                            自定义</label>
                    </dd>
                </dl>
                <dl class="addApproveUser notifieUser">
                    <dt><span class="fc-star">*</span>抄送分配：</dt>
                    <dd style="display: flex;align-items: center">
                        <div style="margin-top: 0;display: flex;flex-wrap: wrap;" class="selectName"></div>
                        <button type="button" name="addApproveUser" plain=""
                                class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
                                onclick="selNotifier()">
                            <i class="layui-icon layui-icon-add-1"></i>
                            选择
                        </button>
                        <input type="text" name="userId" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="userName" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="roleName" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="roleId" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="deptName" class="fc-ipt fc-ipt-auto fc-hide">
                        <input type="text" name="deptId" class="fc-ipt fc-ipt-auto fc-hide">
                    </dd>
                </dl>
                <dl class="addApproveUser notifierType" style="display: none;">
                    <dt><span class="fc-star">*</span>自定义权限：</dt>
                    <dd>
                        <select id="notifierQX">
                        </select>
                    </dd>
                </dl>
                <dl class="addApproveUser">
                    <dt>备注：</dt>
                    <dd class="fc-form-inline">
                        <textarea type="text" name="remark" autocomplete="off" placeholder="请输入备注"
                                  class="fc-ipt fc-ipt-auto" style="width: 100%;"></textarea>
                    </dd>
                </dl>
            </div>
        </div>
    </form>
</script>
<script>
    layui.use(['jquery', 'febs', 'form', 'eleTree'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form

        var notifierType = 1
        // 权限设置
        window.workflowNotifierTypes = function (type) {
            $(".selectName").empty()
            if (type == 1 || type == 3 || type == 4) {
                $('.notifierType').hide()
                $('.notifieUser').show()
                notifierType = type
            } else if (type == 2) {
                // 主管审批
                $('.notifierType').hide()
                $('.notifieUser').hide()
            } else if (type == 5) {
                $('.notifieUser').hide()
                $('.notifierType').show()
            }
        }
        // 处理对象
        window.selNotifier = function () {
            if (notifierType == 1) {
                // 指定人员
                febs.modal.open('选择人员', '/common/user/', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.userId}" data-name="${item.userName}">${item.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        } else {
                            htl += `<span class="tag" data-id="${data.userId}" data-name="${data.userName}">${data.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            } else if (notifierType == 3) {
                // 指定角色
                febs.modal.open('选择角色', '/common/role/', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId,
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.roleId}" data-name="${item.roleName}">${item.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        }else{
                            htl += `<span class="tag" data-id="${data.roleId}" data-name="${data.roleName}">${data.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            } else if (notifierType == 4) {
                // 指定部门
                febs.modal.open('选择部门', '/common/dept', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: ['500px','600px'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.deptId}" data-name="${item.deptName}">${item.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        }else{
                            htl += `<span class="tag" data-id="${data.deptId}" data-name="${data.deptName}">${data.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            }
        }
    })
</script>
<!-- 弹窗：条件属性 -->
<script id="tpl-condition" type="text/html">
    <form name="form" novalidate="novalidate">
        <div class="fieldBox">
            <div class="fieldTitle">节点名称</div>
            <div class="fc-form" id="conditionDrawer">
                <dl>
                    <dt><span class="fc-star">*</span>节点名称：</dt>
                    <dd class="fc-form-inline">
                        <input type="text" name="workflowNodeName" autocomplete="off" placeholder="请输入节点名称"
                               class="fc-ipt fc-ipt-auto">
                    </dd>
                </dl>
                <dl>
                    <dt><span class="fc-star">*</span>优先级：</dt>
                    <dd style="flex: auto;">
                        <input type="number" name="workflowNodeTransOrder" placeholder="优先级" value="0"
                               class="fc-ipt fc-ipt-auto" style="width: 50%;">
                    </dd>
                    <dt><span class="fc-star">*</span>条件关系：</dt>
                    <dd style="flex: auto;">
                        <label class="fc-group"><input type="radio" name="workflowNodeTransType" value="1" checked
                                                       lblText="与或"/>与或</label>
                        <label class="fc-group"><input type="radio" name="workflowNodeTransType" value="2"
                                                       lblText="并且"/>并且</label>
                    </dd>
                </dl>
                <dl class="addApproveUser">
                    <dt>备注：</dt>
                    <dd class="fc-form-inline">
                        <textarea type="text" name="remark" autocomplete="off" placeholder="请输入备注"
                                  class="fc-ipt fc-ipt-auto" style="width: 100%;"></textarea>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="fieldBox">
            <div class="fieldTitle">节点条件</div>
            <div class="fc-form allBtnContainer" id="conditionDivs">
                <dl class="conditionDiv">
                    <i class="layui-icon layui-icon-close conditionBtn"></i>
                    <div class="first">
                        <dt><span class="fc-star">*</span>条件类型：</dt>
                        <dd style="flex: auto;">
                            <label class="fc-group">
                                <input type="radio" name="conditionType" value="1" data-type="4" checked
                                       onclick="workflowConditionTypes(this)"/>
                                发起人部门
                            </label>
                            <label class="fc-group">
                                <input type="radio" name="conditionType" value="2" data-type="3"
                                       onclick="workflowConditionTypes(this)"/>
                                发起人角色
                            </label>
                            <label class="fc-group">
                                <input type="radio" name="conditionType" value="3" data-type="1"
                                       onclick="workflowConditionTypes(this)"/>
                                上一级操作
                            </label>
                            <label class="fc-group">
                                <input type="radio" name="conditionType" value="4" data-type="2"
                                       onclick="workflowConditionTypes(this)"/>
                                自定义
                            </label>
                            <br/>
                            <br/>
                            <label class="fc-group" style="margin-left: 0;">
                                <input type="radio" name="conditionType" value="5" data-type="5"
                                       onclick="workflowConditionTypes(this)"/>
                                业务字段
                            </label>
                        </dd>
                    </div>
                    <div class="second screen">
                        <dt><span class="fc-star">*</span>条件筛选：</dt>
                        <dd style="display: flex;align-items: center">
                            <div style="margin-top: 0;display: flex;flex-wrap: wrap" class="selectName"></div>
                            <button type="button" name="addApproveUser" plain=""
                                    class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
                                    onclick="selConditionUser(this)">
                                <i class="layui-icon layui-icon-add-1"></i>
                                选择
                            </button>
                        </dd>
                    </div>
                    <input type="text" name="roleName" class="fc-ipt fc-ipt-auto fc-hide">
                    <input type="text" name="roleId" class="fc-ipt fc-ipt-auto fc-hide">
                    <input type="text" name="deptName" class="fc-ipt fc-ipt-auto fc-hide">
                    <input type="text" name="deptId" class="fc-ipt fc-ipt-auto fc-hide">
                    <div class="third formual">
                        <dt><span class="fc-star">*</span>条件公式：</dt>
                        <dd style="flex: auto;">
                            <label class="fc-group"><input type="radio" name="conditionOperation" value="1"
                                                           checked/>属于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperation" value="2"/>不属于</label>
                        </dd>
                    </div>
                    <div class="lastLevel" style="display: none">
                        <dt><span class="fc-star">*</span>操作按钮：</dt>
                        <dd>
                            <select class="lastNode">

                            </select>
                        </dd>
                    </div>
                    <div class="custom" style="display: none">
                        <dt><span class="fc-star">*</span>自定义：</dt>
                        <dd>
                            <select class="branchSelect">
                            </select>
                        </dd>
                    </div>
                    <div class="tableNames" style="display: none">
                        <dt><span class="fc-star">*</span>业务表：</dt>
                        <dd>
                            <select class="tableNameSelect sameSelect" onchange="tableNameSelectChange(this)">

                            </select>
                        </dd>
                    </div>
                    <div class="tableNameSelects" style="display: none">
                        <dt><span class="fc-star">*</span>表字段：</dt>
                        <dd>
                            <select class="tableNameSelectChild">
                                <option value="">暂无选项</option>
                            </select>
                        </dd>
                    </div>
                    <div class="five" style="display: none">
                        <dt><span class="fc-star">*</span>条件公式：</dt>
                        <dd style="flex: auto;">
                            <label class="fc-group"><input type="radio" name="conditionOperationLast" value="1" checked/>属于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperationLast" value="2"/>不属于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperationLast" value="3"/>大于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperationLast" value="4"/>大于等于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperationLast" value="5"/>小于</label>
                            <label class="fc-group"><input type="radio" name="conditionOperationLast"  value="6"/>小于等于</label>
                        </dd>
                    </div>
                    <div class="six" style="display: none">
                        <dt><span class="fc-star">*</span>对比值：</dt>
                        <dd style="flex: auto;">
                            <label class="fc-group"><input type="text" name="conditionValue" placeholder="请输入对比值"/></label>
                        </dd>
                    </div>
                </dl>
            </div>
            <div class="addButton">
                <button type="button" class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
                        onclick="addCondition(this)">新增
                </button>
            </div>
        </div>
    </form>
</script>
<script>
    layui.use(['jquery', 'febs', 'form', 'eleTree'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form
        let radioInput = [1, 2, 3]

        function passType(data, b) {
            //所有模块
            // $(data).attr("checek","checked")
            // let passInput=$(".pass");
            // for(let i=0;i<passInput.length;i++){
            //     if($($(".pass")[i]).attr("name")!=$(data).attr("name")){
            //         $($(".pass")[i]).attr("checked",false);
            //         $($(".pass")[i]).attr("disabled","disabled");
            //     }
            // }

        }
        // 权限设置
        window.workflowConditionTypes = function (data) {
            let type = $(data).attr("data-type")
            if (type == 3 || type == 4) {//发起部门或发起人角色
                $(data).parents(".conditionDiv").find(".screen").show()
                $(data).parents(".conditionDiv").find(".lastLevel").hide()
                $(data).parents(".conditionDiv").find(".custom").hide()
                $(data).parents(".conditionDiv").find(".formual").show()
                $(data).parents(".conditionDiv").find(".selectName").text('')
                $(data).parents(".conditionDiv").find(".tableNames").hide()
                $(data).parents(".conditionDiv").find(".tableNameSelects").hide()
                $(data).parents(".conditionDiv").find(".five").hide()
                $(data).parents(".conditionDiv").find(".six").hide()
            } else if (type == 1) {// 上一级操作
                $(data).parents(".conditionDiv").find(".screen").hide()
                $(data).parents(".conditionDiv").find(".lastLevel").show()
                $(data).parents(".conditionDiv").find(".custom").hide()
                $(data).parents(".conditionDiv").find(".formual").hide()
                $(data).parents(".conditionDiv").find(".tableNames").hide()
                $(data).parents(".conditionDiv").find(".tableNameSelects").hide()
                $(data).parents(".conditionDiv").find(".five").hide()
                $(data).parents(".conditionDiv").find(".six").hide()
            } else if (type == 2) {// 自定义
                $(data).parents(".conditionDiv").find(".screen").hide()
                $(data).parents(".conditionDiv").find(".lastLevel").hide()
                $(data).parents(".conditionDiv").find(".custom").show()
                $(data).parents(".conditionDiv").find(".formual").hide()
                $(data).parents(".conditionDiv").find(".tableNames").hide()
                $(data).parents(".conditionDiv").find(".tableNameSelects").hide()
                $(data).parents(".conditionDiv").find(".five").hide()
                $(data).parents(".conditionDiv").find(".six").hide()
            }else if(type == 5){// 业务字段
                $(data).parents(".conditionDiv").find(".screen").hide()
                $(data).parents(".conditionDiv").find(".lastLevel").hide()
                $(data).parents(".conditionDiv").find(".custom").hide()
                $(data).parents(".conditionDiv").find(".formual").hide()
                $(data).parents(".conditionDiv").find(".tableNames").show()
                $(data).parents(".conditionDiv").find(".tableNameSelects").show()
                $(data).parents(".conditionDiv").find(".five").show()
                $(data).parents(".conditionDiv").find(".six").show()
            }
        }

        window.changeTable=function (data){
        }
        // 处理对象
        window.selConditionUser = function (datas) {
            let types = $(datas).parents(".conditionDiv").find("input[type='radio']:checked").attr("data-type")
            if (types == 1) {
                // 指定人员
                febs.modal.open('选择人员', '/common/user/', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.userId}" data-name="${item.userName}">${item.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        } else {
                            htl += `<span class="tag" data-id="${data.userId}" data-name="${data.userName}">${data.userName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $(datas).parents(".conditionDiv").find('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });


            } else if (types == 3) {
                // 指定角色
                febs.modal.open('选择角色', '/common/role/', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: [$(window).width() <= 750 ? '90%' : '70%', '90%'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId,
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data && data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.roleId}" data-name="${item.roleName}">${item.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                        }else{
                            htl += `<span class="tag" data-id="${data.roleId}" data-name="${data.roleName}">${data.roleName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $(datas).parents(".conditionDiv").find('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            } else if (types == 4) {
                // 指定部门
                febs.modal.open('选择部门', '/common/dept', {
                    btn: ['提交','取消'],
                    zIndex: 1989202290,
                    area: ['500px','600px'],
                    btn2: function (index) {
                        layer.close(index);
                    },
                    data: {
                        multiple: true,
                        tenantId: userInfo.tenantId
                    },
                    yes: function (index, layero) {
                        let data = getSelectData()
                        let htl = ``;
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                htl += `<span class="tag" data-id="${item.deptId}" data-name="${item.deptName}">${item.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                            })
                            layer.close(index);
                        }else{
                            htl += `<span class="tag" data-id="${data.deptId}" data-name="${data.deptName}">${data.deptName}<span style="color: red;margin-left: 5px;cursor:pointer;" onclick="delTags(this)">x</span></span>`
                        }
                        $(datas).parents(".conditionDiv").find('.selectName').html(htl)
                        layer.close(index);
                        return false;
                    },
                });
            }
        }
    })
</script>
<!-- 弹窗演示：选择树 -->
<script id="tpl-tree" type="text/html">
    <form name="form" novalidate="novalidate">
        <div class="fc-tree">
            <ul class="ztree"></ul>
        </div>
    </form>
</script>

<script th:inline="javascript">
    var workflowInfo = [[${workflowInfo}]]
</script>
<script th:src="@{/febs/lay/modules/workflow/js/json2.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/js/template.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/vendor/zTree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/vendor/zTree_v3/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/vendor/popper.js/packages/popper/dist/umd/popper.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/vendor/tippyjs/umd/index.all.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/vendor/AlertifyJS/build/alertify.js}"></script>
<script th:src="@{/febs/lay/modules/workflow/js/global.js}"></script>
<script th:src="@{/febs/js/workflow/workflowInfo/workflowInfoEdit.js(v=1)}"></script>
